import React from 'react'

import CommentList from '../../../components/commentList'
import LoadMore from '../../../components/LoadMore'
import {get} from '../../../fetch/get.js'

// import './style.scss'

class Comment extends React.Component{
    constructor(props, context){
        super(props, context)
        this.state={
            data: [],
            isLoadMore: false,
            hasMore: true,
            page: 0
        }
    }
    render() {
        return (
            <div>
                {
                    this.state.data.length
                    ? <CommentList data={this.state.data}></CommentList>
                    : <div>暂时没有评论</div>
                }
                {
                    this.state.hasMore
                    ? <LoadMore loadMoreFn = {this.LoadMorePage.bind(this)}></LoadMore>
                    : '已经是最后一页了'
                }
            </div>
        )
    }
    componentDidMount() {
        this.LoadFisrtPage()
    }
    LoadFisrtPage() {
        const page = 0
        this.LoadData(page)
    }
    LoadMorePage() {
        const page = this.state.page
         this.LoadData(page)
    }
    LoadData(page) {
        if(page >= 3) {
            this.setState({
                hasMore: false
            })
        }
        const result = get('/api/detail/comment/' + page + '/' + this.props.id)
        const data = this.state.data
        result.then(res => {
            return res.json()
        }).then(json => {
            this.setState({
                data: data.concat(json),
                page: page + 1
            })
        })
    }
}

export default Comment